<template>
  <el-container>
    <el-header>
      <el-button type="primary" @click="add_bt">添加</el-button>
    </el-header>
    <el-main>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="封面">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="$get_img+scope.row.image"></el-image>
          </template>
        </el-table-column>


        <el-table-column label="商品名称" prop="name">
        </el-table-column>


        <el-table-column label="套餐价格" prop="price">
        </el-table-column>

        <el-table-column label="商家名称" prop="shop_name">
        </el-table-column>

        <el-table-column label="电话" prop="phone">
        </el-table-column>

        <el-table-column label="地址" prop="address">
        </el-table-column>

        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit_bt(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :title="edit_type==0?'添加':'编辑'" :visible.sync="visible" width="60%" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">

          <el-row>
            <el-col :span="12">
              <el-form-item label="商品名称">
                <el-input v-model="form.name" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商家名称">
                <el-input v-model="form.shop_name" class="input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-form-item label="封面">
            <PicOne :url="form.image" index="image" @get_url="get_url" @delImg="delImg"></PicOne>
          </el-form-item>

          <el-form-item label="广告图">
            <el-row :gutter="30">
              <el-col :span="4" v-for="(item,index) in form.banners" :key="index">
                <PicOne :url="item" @delImg="del_banners(index)"></PicOne>
              </el-col>
              <el-col :span="5">
                <PicOne index="banners" @get_url="get_banners"></PicOne>
              </el-col>
            </el-row>
          </el-form-item>


          <el-row>
            <el-col :span="12">
              </el-form-item>
              <el-form-item label="套餐价格">
                <el-input v-model="form.price" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="可兑换价格">
                <el-input v-model="form.coupon_price" class="input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="核销码">
                <el-input v-model="form.code" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存">
                <el-input v-model="form.stock" class="input" type="number" :min="0"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="纬度">
                <el-input v-model="form.position[0]" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度">
                <el-input v-model="form.position[1]" class="input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地址">
                <el-input v-model="form.address" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="form.phone" class="input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="位置">
            <Map :position="form.position" :center="form.position" zoom="18" :icon="icon" :choose_position="get_position"></Map>
          </el-form-item>


          <el-form-item label="详情">
            <Edit :contents="form.content" :content_back="content_back"></Edit>
          </el-form-item>




          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="primary" @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-main>
    <el-footer>
      <el-pagination background layout="prev, pager, next" :page-size="search_form.num" :total="total" @current-change="current_change">
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
  import PicOne from '../../components/UploadPicOne.vue'
  import Edit from '../../components/quill-editor.vue'
  import Map from '../../components/amap.vue'
  export default {
    components: {
      PicOne,
      Edit,
      Map
    },
    data() {
      return {
        list: [],
        inputVisible: false,
        inputValue: "",
        tableName: "goods",
        form: {
          name: "",
          type: 0,
          position: [106.665631, 26.605839],
          value: "",
          weight: "",
          reward: "",
          table: this.tableName,
          address: '',
          iamge: '',
          banners: [],
          lng: '',
          lat: '',
          content: ''
        },
        icon: this.$get_img + 'system/icon/shop.png',
        total: 0,
        url: ["/cms/table/insert", "/cms/table/update"],
        edit_tips: ["添加成功", "修改成功"],
        edit_type: 0, //0添加1编辑
        visible: false,
        type: ["谢谢参与", "奖品"],
        search_form: {
          table: "",
          page: 1,
          num: 5,
          where: null,
          orderBy: "id",
          asdes: "asc"
        }
      }
    },
    mounted() {
      this.get_data()
    },
    methods: {
      get_data() {
        this.search_form.table = this.tableName
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.$model.post("cms/table/get", this.search_form).then(res => {
          if (res.code == 200) {
            loading.close();
            this.list = res.data.data
            // console.log("this.list:", this.list)
            this.total = res.data.total
          }
        })
      },
      content_back(e) {
        this.form.content = e
      },
      get_banners(e) {
        this.form.banners.push(e.url)
      },
      get_position(e) {
        this.form.position = e
        this.form.lat = this.form.position[0]
        this.form.lng = this.form.position[1]
        this.$model.post("cms/common/map_regeo", this.form).then(res => {
          if (res.code == 200) {
            this.form.address = res.data.regeocode.formatted_address
          }
        })

      },
      delImg(e) {
        this.form[e] = ""
      },
      del_banners(index) {
        this.form.banners.splice(index, 1)
      },
      get_url(e) {
        this.form[e.index] = e.url
      },
      handleClose() {
        this.visible = false
        this.form = {
          name: "",
          icon: "",
          type: 0,
          position: [106.665631, 26.605839],
          value: "",
          weight: "",
          reward: "",
          table: this.tableName,
          image: '',
          banners: [],
          address: '',
          lng: '',
          lat: '',
          content: ''
        }
      },
      current_change(e) {
        this.search_form.page = e
        this.get_data()
      },
      edit_bt(row) {
        this.edit_type = 1
        this.form = row
        let position = [row.lat, row.lng]
        this.form["position"] = position
        this.visible = true
      },
      submit() {
        this.form["table"] = this.tableName
        this.$model.post(this.url[this.edit_type], this.form).then(res => {
          if (res.code == 200) {
            this.$message({
              message: this.edit_tips[this.edit_type],
              type: 'success'
            });
            this.clear()
            this.get_data()
          }
        })

      },
      clear() {
        this.edit_type = 0
        this.handleClose()
        this.form = {
          name: "",
          icon: "",
          type: 0,
          position: [106.665631, 26.605839],
          value: "",
          weight: "",
          reward: "",
          table: this.tableName,
          image: '',
          banners: [],
          address: '',
          lng: '',
          lat: '',
          content: ''
        }
      },
      add_bt() {
        this.visible = true
        this.edit_type = 0

      },
      del(id) {
        let url = "cms/table/del?table=goods&id=" + id
        this.$model.put(url).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '已删除',
              type: 'success'
            });
            this.search_form.page = 1
            this.get_data()
          }
        })
      }
    }
  }
</script>
<style>
  .input {
    width: 300px;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }


  .form {
    width: 400px;
  }

  .select {
    width: 100%;
  }

  .tags {
    margin-left: 10px;
  }
</style>
